<template>
	<view :class="config.style">
		<!-- #ifdef H5-->
		<Top :config="config"></Top>
		<!-- #endif -->
		<view class="main-section top">
			<mescroll-uni ref="mescrollRef" @init="mescrollInit" :top="msecrollTop" bottom="90" :down="downOption" @down="downCallback" @up="upCallback">
				<view class="questions-list-section">
					<view class="list" v-if="list">
						<view class="item" v-for="(item,index) in list" :key="index">
							<view class="question">
								<image class="tb" src="../../../static/images/questions.png" mode="widthFix"></image>
								<text class="content">
									{{item.question}}
								</text>
							</view>
							<view class="answer">{{item.answer}}</view>
						</view>
					</view>
					<view class="empty-list" v-else>
						<view class="tip">
							还没有提问哦~
						</view>
					</view>
				</view>
			</mescroll-uni>
			
			<view class="question-bar">
				<view class="question">
					<view class="uni-form-item uni-column">
						<input class="uni-input" name="question" placeholder="我要提问" confirm-type="send" v-model="question" @confirm="questionSubmit"/>
					</view>
				</view>
				<view class="question-submit">
					<button type="default" size="mini" class="submit" hover-class="hover" @click="questionSubmit">提问</button>
				</view>
			</view>
			
		</view>
		
		<!--登录框-->
		<Login ref="login" :config="config" />
	</view>
</template>

<script>
	import { mapState,mapMutations } from 'vuex'
	import MescrollMixin from "@/components/mescroll-uni/mescroll-mixins.js";
	import Top from '../common/top.vue'
	
	export default {
		mixins: [MescrollMixin], // 使用mixin (在main.js注册全局组件)
		components: {
			Top,
		},
		data() {
			return {
				infoType: '', //问答课程类型
				infoId: 0, //课程类型ID
				content: '', //提问的内容
				page: 1, // 当前页面，默认1
				list: [],
				msecrollTop: 0,
				downOption: {
					auto: false //是否在初始化后,自动执行downCallback; 默认true
				},
				upOption:{
					noMoreSize: 4, //如果列表已无数据,可设置列表的总数量要大于半页才显示无更多数据;避免列表数据过少(比如只有一条数据),显示无更多数据会不好看; 默认5
					empty:{
						tip: '~ 搜索无数据 ~', // 提示
						btnText: '去看看'
					}
				},
			}
		},
		onLoad(option) {
			//获取url参数
			this.getUrlParam()
			// #ifdef H5
			this.msecrollTop = 78;
			// #endif
		},
		created() {
			
		},
		computed: {
			...mapState(['config'])
		},
		methods: {
			
			//获取url参数
			getUrlParam: function(){
				// #ifdef MP-WEIXIN
				//console.log('小程序端执行')
				let routes = getCurrentPages(); // 获取当前打开过的页面路由数组
				let curRoute = routes[routes.length - 1].route //获取当前页面路由
				let curParam = routes[routes.length - 1].options; //获取路由参数
				// #endif
			
				// #ifdef H5
				let curParam = this.$route.query;
				// #endif
				this.urlParams = curParam
				this.infoType = curParam.info_type
				this.infoId = curParam.info_id
			},
			
			//上拉加载的回调
			upCallback: function() {
				let that = this
				let data = {}
					data.action = 'lists'
					data.m = 'muu_classroom'
					data.info_id = this.infoId
					data.info_type = this.infoType
					data.rows = 10
					data.page = this.page
				//获取评价列表数据
				let url = '';
					//#ifdef MP-WEIXIN
					url = 'entry/wxapp/questions'
					//#endif
					//#ifdef H5
					url = 'entry/site/questions'
					//#endif
				this.util.request({
					url : url,
					data : data,
					success: function (res) {
						//console.log(res.data.code);
						if (res.data.code == 200) {
							let list = res.data.data.data
							that.list = that.list.concat(list);
							//联网成功的回调,隐藏下拉刷新和上拉加载的状态;
							that.mescroll.endSuccess(list.length);
							that.page = that.page + 1
							//console.log(that.goods.length)
						}
					}
				})
			},
			//下拉刷新
			downCallback: function() {
				let that = this
				this.page = 1
				this.list = []
				let data = {}
					data.action = 'lists'
					data.m = 'muu_classroom'
					data.info_id = this.infoId
					data.info_type = this.infoType
					data.rows = 10
					data.page = 1
				//获取评价列表数据
				let url = '';
					//#ifdef MP-WEIXIN
					url = 'entry/wxapp/questions'
					//#endif
					//#ifdef H5
					url = 'entry/site/questions'
					//#endif
				this.util.request({
					url : url,
					data : data,
					success: function (res) {
						if (res.data.code == 200) {
							that.list = res.data.data.data
							//联网成功的回调,隐藏下拉刷新和上拉加载的状态;
							that.mescroll.endSuccess(that.list.length);
							that.page = 2
						}
					}
				})
			},
			
			/**
			 * 发起提问
			 * @param {Object} e
			 */
			questionSubmit: function(e){
				//console.log(e)
				let that = this
				let question = this.question
				let data = {}
					data.action = 'add'
					data.m = 'muu_classroom'
					data.info_id = this.infoId
					data.info_type = this.infoType
					data.question = question
				console.log(data)	
				//return false;
				let url = '';
					//#ifdef MP-WEIXIN
					url = 'entry/wxapp/questions'
					//#endif
					//#ifdef H5
					url = 'entry/site/questions'
					//#endif
				this.util.request({
					url : url,
					data : data,
					method: 'POST',
					
					success: function (res) {
						console.log(res)
						if (res.data.code == 200) {
							console.log(res.data)
							uni.showToast({
							    title: res.data.msg,
							    duration: 2000
							});
							that.downCallback()
						}else{
							if(res.data.msg == '需要登录'){
								//触发登录框
								that.$refs.login.loginDialog()
							}else{
								uni.showToast({
								    title: res.data.msg,
								    duration: 2000
								});
							}
						}
					}
				})
			},
		}
	}
</script>

<style lang="scss">
	.questions-list-section {
		
		.list {
			padding: 20rpx;
			.item {
				border-bottom: 2rpx solid #f2f2f2;
				padding: 10rpx 0 10rpx 0;
				margin-bottom: 10rpx;
		
				.question {
					color: #666;
					margin-bottom: 10rpx;
					font-size: 28rpx;
					color: #333;
					
					.tb {
						display: inline-block;
						width: 32rpx;
						height: 32rpx;
						overflow: hidden;
						margin-right: 10rpx;
						margin-bottom: 6rpx;
						vertical-align: middle;
					}
					.content {
						font-size: 28rpx;
						color: #333;
						line-height: 48rpx;
					}
				}
				.answer {
					font-size: 24rpx;
					color: 24rpx;
					color: #999;
					line-height: 36rpx;
					.time {
						font-size: 24rpx;
						color: 24rpx;
						color: #999;
					}
				}
				&:last-child {
					margin-bottom: 0;
					border-bottom: 0;
					padding-bottom: 0;
				}
			}
		}
		.empty-list {
			.tip {
				text-align: center;
				color: #999;
				font-size: 28rpx;
				padding: 20rpx 0;
			}
		}
	}

	.question-bar {
		position: fixed;
		top: auto;
		right: 0;
		left: 0;
		bottom: 0;
		background-color: #fff;
		display: flex;
		border-top:2rpx solid #f4f6f7!important;
		font-size: 24rpx;
		.question {
			flex: 1;
			padding: 16rpx;
			.uni-input {
				margin: 0;
				height: 64rpx;
				background-color: #f2f2f2;
				border-radius: 32rpx;
				border: 2rpx solid #eee;
				font-size: 24rpx;
				padding: 0 20rpx;
			}
		}
		.question-submit {
			width: 120rpx;
			padding: 16rpx 16rpx 16rpx 0;
			text-align: center;
			.submit {
				color: #fff;
				padding: 0 10rpx;
				border-radius: 30rpx;
				display: block;
				border: 0;
				height: 68rpx;
				line-height: 64rpx;
				border: 2rpx solid rgba(0,0,0,.2);
				&:after {
					border: 0;
				}
			}
		}
	}
	
	.Blue {
		
		.question-submit {
			button {
				background-color: $Blue;
			}
			.hover {
				background-color: $Blue-hover;
			}
		}
	}
	.Green {
		
		.question-submit {
			button {
				background-color: $Green;
			}
			.hover {
				background-color: $Green-hover;
			}
		}
	}
	.LightRed {
		
		.question-submit {
			button {
				background-color: $LightRed;
			}
			.hover {
				background-color: $LightRed-hover;
			}
		}
	}
	.Orange {
		
		.question-submit {
			button {
				background-color: $Orange;
			}
			.hover {
				background-color: $Orange-hover;
			}
		}
	}
	.LightPink {
		
		.question-submit {
			button {
				background-color: $LightPink;
			}
			.hover {
				background-color: $LightPink-hover;
			}
		}
	}
	.Magenta {
		
		.question-submit {
			button {
				background-color: $Magenta;
			}
			.hover {
				background-color: $Magenta-hover;
			}
		}
	}
</style>
